<script setup>
import { message } from 'ant-design-vue'
import { registerFetch } from '../composables/useHttpFetch'

const formState = reactive({
  nickname: '',
  phone: '',
  password: '',
})

const checked = ref(false)

const register = async () => {
  // 表单验证
  if (!formState.nickname.trim()) {
    return message.error('请输入昵称')
  }
  if (!formState.phone.trim()) {
    return message.error('请输入手机号')
  }
  if (!/^1[3-9]\d{9}$/.test(formState.phone)) {
    return message.error('请输入正确的手机号')
  }
  if (!formState.password.trim()) {
    return message.error('请输入密码')
  }
  if (formState.password.length < 6) {
    return message.error('密码长度不能少于6位')
  }

  try {
    const { data, error } = await registerFetch({
      method: 'POST',
      body: { ...formState },
      server: false,
      key: 'registerFetch',
    })

    // 检查网络错误
    if (error.value) {
      console.error('注册请求失败:', error.value)
      message.error('网络请求失败，请检查网络连接')
      return
    }

    // 检查响应数据
    if (!data.value) {
      console.error('响应数据为空')
      message.error('服务器响应异常')
      return
    }

    // 根据后端约定的成功状态码判断
    if (data.value.code === 0) {
      message.success('注册成功！')
      // 延迟跳转，让用户看到成功消息
      setTimeout(() => {
        navigateTo('/sign_in')
      }, 1000)
    } else {
      console.error('注册失败:', data.value.msg)
      message.error(data.value.msg || '注册失败，请重试')
    }
  } catch (err) {
    console.error('注册异常:', err)
    message.error('注册失败，请稍后重试')
  }
}
</script>

<template>
  <div class="auth-page signup-page">
    <div class="logo">
      <NuxtLink href="#" class="">
        <img src="/images/logo.png" alt="logo" />
      </NuxtLink>
    </div>
    <div class="auth-content">
      <a-row type="flex" justify="center" style="width: 100%">
        <a-col :span="16">
          <a-row>
            <a-col :span="12">
              <a-row class="login-left" type="flex" justify="end">
                <img class="sign_bg" src="/images/sign_bg.png" alt="sign_bg" />
                <a-row>
                  <a-button
                    style="width: 250px; height: 45px"
                    shape="round"
                    size="large"
                    type="primary"
                    >下载简书APP</a-button
                  >
                  <a-popover placement="topRight">
                    <template #content>
                      <div class="page_download">
                        <img
                          style="width: 100px"
                          src="/images/login_page_download.png"
                          alt="download"
                        />
                      </div>
                    </template>
                    <div class="page_download">
                      <img src="/images/login_page_download.png" alt="download" />
                    </div>
                  </a-popover>
                </a-row>
              </a-row>
            </a-col>
            <a-col :span="12">
              <div class="login-right">
                <div class="login-form">
                  <a-row type="flex" justify="center" class="tag-title">
                    <NuxtLink to="/sign_in" class="sign_in">登录</NuxtLink>
                    <b>·</b>
                    <NuxtLink to="/sign_up" class="active">注册</NuxtLink>
                  </a-row>
                  <div class="form">
                    <a-form :model="formState">
                      <a-form-item>
                        <a-input
                          style="border: none; background-color: #f7f7f7 !important"
                          placeholder="你的昵称"
                          v-model:value="formState.nickname"
                        >
                          <template #prefix>
                            <icon-ep-user-filled />
                          </template>
                        </a-input>
                      </a-form-item>
                      <a-form-item style="border-top: 1px solid #c8c8c8">
                        <a-input
                          style="border: none; background-color: #f7f7f7 !important"
                          placeholder="手机号"
                          v-model:value="formState.phone"
                        >
                          <template #prefix>
                            <icon-mdi-cellphone-iphone />
                          </template>
                        </a-input>
                      </a-form-item>
                      <a-form-item style="border-top: 1px solid #c8c8c8">
                        <a-input
                          style="border: none; background-color: #f7f7f7 !important"
                          placeholder="密码"
                          type="password"
                          v-model:value="formState.password"
                        >
                          <template #prefix>
                            <icon-ant-design-lock-filled />
                          </template>
                        </a-input>
                      </a-form-item>
                    </a-form>
                  </div>

                  <a-row type="flex" justify="center" class="sign_in_btn">
                    <a-button @click="register" type="success" shape="round"> 注册 </a-button>
                  </a-row>
                  <a-row type="flex" justify="center">
                    <p
                      style="
                        width: 80%;
                        color: #b5b5b5;
                        font-size: 13px;
                        text-align: center;
                        margin-top: 10px;
                      "
                    >
                      点击"注册"即表示您同意并愿意遵守简书的 <a>用户协议</a>和<a>隐私政策</a>
                    </p>
                  </a-row>
                  <div class="more-sign">
                    <h6>社交帐号注册</h6>
                    <a-row type="flex" justify="center" style="margin-top: 30px">
                      <div style="margin-right: 30px">
                        <icon-ant-design-wechat-outlined style="color: #00bb29; font-size: 30px" />
                      </div>
                      <div>
                        <icon-ant-design-qq-outlined style="color: #498ad5; font-size: 30px" />
                      </div>
                    </a-row>
                  </div>
                </div>
              </div>
            </a-col>
          </a-row>
        </a-col>
      </a-row>
    </div>
  </div>
</template>

<style lang="scss">
@use '../assets/styles/global.scss';
@use '../assets/styles/antd-overrides.scss';
</style>
